import React, { useState, useEffect } from 'react'
import { StyledWrap } from './style'
import { Progress } from '@kedacom/react-next'
import { IRoomConfigInfo } from '@/api/sysConfig/virtualRoomConfig/interface'
import { t } from 'i18next'

export default function ConfigInfo({ data }: { data: IRoomConfigInfo }) {
	const [progressVal, setProgressVal] = useState<number>(0)

	useEffect(() => {
		const configCount = data.config_count
		const totalCount = data.total_count
		const percent =
			(configCount / totalCount) * 100 && totalCount !== 0 ? Math.floor((configCount / totalCount) * 100) : 0
		setProgressVal(percent)
	}, [data])

	return (
		<StyledWrap className="config-info-wrap">
			<div className="line">
				<div className="mt_name">{data.name}</div>
				<Progress
					percent={progressVal}
					barWidth={150}
					strokeColor={progressVal > 60 ? '#ac1000' : '#299dff'}
				></Progress>
			</div>
			<div className="line">
				<div className="percent">{progressVal}%</div>
				<div className="count_info">
					<div className="cur_count">
						{t('已配置：')}
						{data.config_count}
					</div>
					<div className="total">
						{t('总数：')}
						{data.total_count}
					</div>
				</div>
			</div>
		</StyledWrap>
	)
}
